<template>
	<view class="details-container">
		<!-- 头部导航 -->
		<uni-nav-bar title="商品详情" left-icon="back" @clickLeft="goBack" fixed="true"
			background-color="#ffffff"></uni-nav-bar>

		<!-- 商品图片轮播 -->
		<swiper class="product-swiper" indicator-dots="true" autoplay="false" interval="3000" duration="500">
			<swiper-item>
				<image class="product-image" :src="$target + productDetails.product_picture" mode="widthFix" />
			</swiper-item>
			<!-- 可以添加更多图片 -->
		</swiper>

		<!-- 商品基本信息 -->
		<view class="product-info">
			<view class="price-section">
				<text class="current-price">¥{{productDetails.product_selling_price}}</text>
				<text class="original-price"
					v-if="productDetails.product_price != productDetails.product_selling_price">¥{{productDetails.product_price}}</text>
			</view>

			<view class="title-section">
				<text class="product-title">{{productDetails.product_name}}</text>
			</view>

			<view class="intro-section">
				<text class="product-intro">{{productDetails.product_intro}}</text>
			</view>
		</view>

		<!-- 商品详情 -->
		<!-- <view class="product-detail">
			<view class="detail-title">商品详情</view>
			<rich-text :nodes="productDetails.product_detail"></rich-text>
		</view> -->

		<!-- 底部操作栏 -->
		<view class="action-bar">
			<view class="action-icons">
				<view class="icon-item" @tap="navigateToHome">
					<uni-icons type="home" size="24" color="#666"></uni-icons>
					<text>首页</text>
				</view>
				<view class="icon-item" @tap="toggleCollect">
					<uni-icons :type="isCollected ? 'heart-filled' : 'heart'" size="24"
						:color="isCollected ? '#e54d42' : '#666'"></uni-icons>
					<text>收藏</text>
				</view>
				<view class="icon-item" @tap="navigateToCart">
					<uni-badge :text="cartCount" type="error" size="small">
						<uni-icons type="cart" size="24" color="#666"></uni-icons>
					</uni-badge>
					<text>购物车</text>
				</view>
			</view>
			<view class="action-buttons">
				<button class="add-cart" @tap="addToCart">加入购物车</button>
				<button class="buy-now" @tap="buyNow">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productID: '', // 商品ID
				productDetails: {}, // 商品详情
				isCollected: false, // 是否收藏
				cartCount: 0, // 购物车数量
				$target: 'http://localhost:3000/', // 图片基础路径
				id: uni.getStorageSync('user_id')
			}
		},
		onLoad(options) {
			this.productID = options.id || '';
			if (this.productID) {
				this.getProductDetails();
				this.checkCollectionStatus();
				this.getCartCount();
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 获取商品详情
			getProductDetails() {
				uni.showLoading({
					title: '加载中...'
				});

				uni.request({
					url: 'http://localhost:8081/api/product/getDetails',
					method: 'POST',
					data: {
						productID: this.productID,
						user_id: uni.getStorageSync('user_id') || ''
					},
					success: (res) => {
						uni.hideLoading();
						if (res.data.code === '001') {
							this.productDetails = res.data.Product[0];
							// 处理详情中的图片
							if (this.productDetails.product_detail) {
								this.productDetails.product_detail = this.productDetails.product_detail
									.replace(
										/<img/gi,
										'<img style="max-width:100%;height:auto"'
									);
							}
						} else {
							uni.showToast({
								title: res.data.msg || '获取商品详情失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
						console.error(err);
					}
				});
			},

			// 检查收藏状态
			checkCollectionStatus() {
				const user_id = uni.getStorageSync('userInfo').user_id;
				if (!user_id) return;

				uni.request({
					url: 'http://localhost:8081/api/user/collect/checkCollect',
					method: 'POST',
					data: {
						user_id: user_id,
						product_id: this.productID
					},
					success: (res) => {
						if (res.data.code === '001') {
							this.isCollected = res.data.isCollected;
						}
					}
				});
			},

			// 获取购物车数量
			getCartCount() {
				const user_id = uni.getStorageSync('userInfo').user_id;
				if (!user_id) return;

				uni.request({
					url: 'http://localhost:8081/api/user/shoppingCart/getCount',
					method: 'POST',
					data: {
						user_id: user_id
					},
					success: (res) => {
						if (res.data.code === '001') {
							this.cartCount = res.data.count;
						}
					}
				});
			},

			// 切换收藏状态
			toggleCollect() {
				const user_id = uni.getStorageSync('userInfo').user_id;
				if (!user_id) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return;
				}

				if (this.isCollected) {
					this.removeCollect();
				} else {
					this.addCollect();
				}
			},

			// 添加收藏
			addCollect() {
				uni.request({
					url: 'http://localhost:8081/api/user/collect/addCollect',
					method: 'POST',
					data: {
						user_id: uni.getStorageSync('userInfo').user_id,
						product_id: this.productID
					},
					success: (res) => {
						if (res.data.code === '001') {
							this.isCollected = true;
							uni.showToast({
								title: '收藏成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.data.msg || '收藏失败',
								icon: 'none'
							});
						}
					}
				});
			},

			// 取消收藏
			removeCollect() {
				uni.request({
					url: 'http://localhost:8081/api/user/collect/deleteCollect',
					method: 'POST',
					data: {
						user_id: uni.getStorageSync('userInfo').user_id,
						product_id: this.productID
					},
					success: (res) => {
						if (res.data.code === '001') {
							this.isCollected = false;
							uni.showToast({
								title: '已取消收藏',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.data.msg || '取消收藏失败',
								icon: 'none'
							});
						}
					}
				});
			},

			// 加入购物车
			addToCart() {
				const user_id = uni.getStorageSync('userInfo').user_id;
				if (!user_id) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return;
				}

				uni.request({
					url: 'http://localhost:8081/api/user/shoppingCart/addShoppingCart',
					method: 'POST',
					data: {
						user_id: user_id,
						product_id: this.productID,
						num: 1
					},
					success: (res) => {
						if (res.data.code === '001') {
							uni.showToast({
								title: '已加入购物车',
								icon: 'success'
							});
							this.getCartCount();
						} else {
							uni.showToast({
								title: res.data.msg || '加入购物车失败',
								icon: 'none'
							});
						}
					}
				});
			},

			// 立即购买
			buyNow() {
				const user_id = uni.getStorageSync('userInfo').user_id;
				if (!user_id) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return;
				}

				// 这里可以跳转到确认订单页面
				uni.navigateTo({
					url: `/pages/order/confirm?product_id=${this.productID}&num=1`
				});
			},

			// 跳转到首页
			navigateToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},

			// 跳转到购物车
			navigateToCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			}
		}
	}
</script>

<style lang="less">
	.details-container {
		padding-bottom: 100px;
		background-color: #f7f7f7;

		.product-swiper {
			width: 100%;
			height: 375px;
			background-color: #fff;

			.product-image {
				width: 100%;
				height: 100%;
			}
		}

		.product-info {
			margin: 10px;
			padding: 15px;
			background-color: #fff;
			border-radius: 8px;

			.price-section {
				display: flex;
				align-items: center;
				margin-bottom: 10px;

				.current-price {
					font-size: 24px;
					color: #e54d42;
					font-weight: bold;
					margin-right: 10px;
				}

				.original-price {
					font-size: 14px;
					color: #999;
					text-decoration: line-through;
					margin-right: 15px;
				}

				.sales {
					font-size: 12px;
					color: #999;
				}
			}

			.title-section {
				margin-bottom: 10px;

				.product-title {
					font-size: 18px;
					font-weight: bold;
					line-height: 1.4;
				}
			}

			.intro-section {
				.product-intro {
					font-size: 14px;
					color: #666;
					line-height: 1.6;
				}
			}
		}

		.product-detail {
			margin: 10px;
			padding: 15px;
			background-color: #fff;
			border-radius: 8px;

			.detail-title {
				font-size: 16px;
				font-weight: bold;
				padding-bottom: 10px;
				border-bottom: 1px solid #eee;
				margin-bottom: 10px;
			}
		}

		.action-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 50px;
			background-color: #fff;
			display: flex;
			align-items: center;
			box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

			.action-icons {
				display: flex;
				width: 40%;
				justify-content: space-around;

				.icon-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					text {
						font-size: 12px;
						color: #666;
						margin-top: 2px;
					}
				}
			}

			.action-buttons {
				display: flex;
				width: 60%;
				height: 100%;

				button {
					flex: 1;
					height: 100%;
					line-height: 50px;
					border-radius: 0;
					font-size: 15px;
					border: none;
					color: #fff;

					&.add-cart {
						background-color: #ff976a;
					}

					&.buy-now {
						background-color: #e54d42;
					}
				}
			}
		}
	}
</style>